<template>
  <div class="grantCoupon">
    <el-form :model="formData" :label-position="labelPosition" label-width="130px" :rules="rules" ref="ruleForm">
      <el-form-item label="商户名称:" prop="shopIdList">
        <el-select
          v-model="formData.shopIdList"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="用户昵称/手机号"
          :remote-method="remoteMethod"
          :loading="loading">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.shopName+'('+item.telephone+')'"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="停车券选择:">
        <el-table :data="couponTable"  border size="mini"  height="200">
          <el-table-column label="选择" align="center" width="60">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.checked" @change="changeCoupon(scope.row)"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="parkingDuration" label="小时" align="center"></el-table-column>
          <el-table-column label="金额" prop="sellPrice" align="center"></el-table-column>
          <el-table-column prop="validityDays" label="有效期(天)" align="center" width="140"></el-table-column>
          <el-table-column label="发放数量" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.quantity" @keyup.native="number(scope.row)" size="mini" :disabled="!scope.row.checked" :class="{checkedtip : array.indexOf(scope.row.id) > -1}"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>

    <div style="text-align: center;">
      <el-button @click="$emit('closeDialog')">取消</el-button>
      <el-button type="warning" @click="submit('ruleForm')">确认发放</el-button>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'grantCoupon',
    filters: {
      typeFilter (type) {
        if(type == 1) {
          return '满减券'
        } else {
          return '折扣券'
        }
      },
      useFilter (use) {
        switch(use) {
          case 1:
            return '通用';
          case 2:
            return '购买时长使用';
          case 3:
            return '购买月租使用';
          case 4:
            return '充值使用';
          case 10:
            return '购买商品使用'
        }
      }
    },
    data() {
      return {
        checked: '',
        formData: {
          parkTicketFormList: [],
        },
        array: [],
        radio: '1',
        couponTable: [],
        state: '',
        ruleOptions: [
          {
            value: '2',
            label: '不限'
          }, {
            value: '1',
            label: '正式会员'
          }, {
            value: '0',
            label: '潜在会员'
          },
        ],
        labelPosition: 'right',
        options: [],
        value: [],
        list: [],
        loading: false,
        rules: {
          shopIdList: [
            { required: true, message: '请输入商户名称', trigger: 'blur' },
          ],
          grantTime: [
            { required: true, message: '请选择发放日期', trigger: 'change' }
          ],

        },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
          }
        },
      }


    },
    mounted() {
      this.getCouponTable();
      this.slectShop();
    },
    methods: {
      slectShop() {
        this.$axios({
          method: 'get',
          url: '/shop/shop-info/shopInfoList',
        }).then((res) => {
          this.options = res.data;
        })
      },
      
      number(item){　　
  　　  item.quantity=item.quantity.replace(/[^\.\d]/g,'');
        item.quantity=item.quantity.replace('.','');
  　　},
  
      remoteMethod(query) {
        this.slectMember(query);
      },

      getCouponTable() {
        this.$axios({
          method: 'get',
          url: '/business/park-ticket-rule/page'
        }).then((res) => {
          this.couponTable = res.data.records;
        })
      },
      
      changeCoupon(row) {
        if(row.checked == true) {
          row.bizParkTicketId = row.id;
          this.formData.parkTicketFormList.push(row)
        } else {
          this.formData.parkTicketFormList.forEach((item,index) => {
            if(item.id == row.id) {
              this.formData.parkTicketFormList.splice(index,1)
            }
          })
        }
      },
      
      submit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.array = [];
            this.formData.parkTicketFormList.forEach((item,index) => {
              if(item.quantity == undefined || item.quantity == '') {
                this.array.push(item.id);
              }
            })

            this.formData.parkTicketFormList.forEach(item => {
              
            })

            if(this.formData.parkTicketFormList.length == 0){
              this.$message.warning('请选择停车券')
              return
            }
            
            if(this.array.length == 0) {
              this.$axios({
                method: 'post',
                url: '/shop/shop-park-ticket/add',
                data: this.formData
              }).then((res) => {
                if(res.code == 200) {
                  this.$message.success('发放停车券成功！');
                  this.$emit('closeDialog',false);
                  this.$emit('refresh');
                } else {
                  this.$message.warning('发放停车券失败！')
                }
              })
            }

          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },
     
    }
  }
</script>

<style scoped>
  .checkedtip {
    border: 1px solid red;
    border-radius: 4px;
  }


</style>
